Vue.component("form-info-box", {
    template: `
      <div class="form">
        <form @submit.prevent="submitForm" autocomplete="off">
          <ul>
            <li>
              <label for="user">用户名：</label>
              <input type="text" v-model="userInput" name="user" id="user" />
              <span v-show="!isUserValid">用户名必须为6~12位英文字母或数字</span>
            </li>
            <li>
              <label for="password">密码：</label>
              <input
                type="password"
                v-model="passwordInput"
                name="password"
                id="password"
              />
              <span v-show="!isPasswordValid">密码必须为6~12位英文字母或数字</span>
            </li>
            <li>
              <label for="gender">性别：</label>
              <label for="man">男</label>
              <input
                type="radio"
                name="gender"
                v-model="gender"
                id="man"
                value="0"
              />
              <label for="woman">女</label>
              <input
                type="radio"
                name="gender"
                v-model="gender"
                id="woman"
                value="1"
              />
              <span v-show="!gender">性别不得为空</span>
            </li>
            <li>
              <label for="card-id">身份证号：</label>
              <input type="text" name="cardID" v-model="cardIDInput" id="card-id" />
              <span v-show="!isCardIDValid">请输入正确的身份证号</span>
            </li>
            <li>
              <label for="phone">手机号：</label>
              <input type="text" name="phone" v-model="phoneInput" id="phone" />
              <span v-show="!isPhoneValid">手机号必须为11位数字</span>
            </li>
            <li>
              <button type="submit" :disabled="!isFormValid">保存</button>
            </li>
          </ul>
        </form>
      </div>
    `,
    data() {
      return {
        userInput: "",
        passwordInput: "",
        gender: "",
        cardIDInput: "",
        phoneInput: "",
      };
    },
    computed: {
      isUserValid() {
        return /^[a-zA-Z0-9]{6,12}$/.test(this.userInput);
      },
      isPasswordValid() {
        return /^[a-zA-Z0-9]{6,12}$/.test(this.passwordInput);
      },
      isCardIDValid() {
        return /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.cardIDInput);
      },
      isPhoneValid() {
        return /^\d{11}$/.test(this.phoneInput);
      },
      isFormValid() {
        return (
          this.isUserValid &&
          this.isPasswordValid &&
          this.gender &&
          this.isCardIDValid &&
          this.isPhoneValid
        );
      },
    },
    methods: {
      submitForm() {
        // 处理表单提价逻辑
      },
    },
  });
  